<template>
    <div class="accounting">
        <img
            class="ssfgk-bj"
            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/seo_m/m_ssfgk_bj.png"
            alt="税收法规库"
        />
        <div class="nav-bar" :style="{ top: AppNavShow ? '3.5rem' : 0 }">
            <nuxt-link to="/" class="left">
                <van-icon name="arrow-left" color="#000000" size="1.5rem" />
            </nuxt-link>
            <div class="centent">优惠政策</div>
            <div class="right"></div>
        </div>
        <div class="search">
            <div class="select" @click="showPicker = true">
                {{ retrieveFields == "title" ? "查标题" : "" }}
                {{ retrieveFields == "info_content_text" ? "查文章" : "" }}
                {{ retrieveFields == "push_number" ? "查文号" : "" }}
                {{ retrieveFields == "push_date" ? "查时间" : "" }}
                <van-icon
                    name="play"
                    size="0.8rem"
                    color="#333333"
                    class="select-icon"
                />
            </div>
            <div class="line"></div>
            <div class="input">
                <van-search
                    v-if="retrieveFields != 'push_date'"
                    v-model="inputText"
                    placeholder="请输入搜索关键词"
                    @search="onSearch"
                />
                <div v-else class="input-date">
                    <div @click="showDatePopup(1)">{{ date1 }}</div>
                    <span>至</span>
                    <div @click="showDatePopup(2)">{{ date2 }}</div>
                </div>
            </div>
            <van-icon
                name="search"
                size="1.5rem"
                color="#333333"
                class="search-icon"
                @click="onSearch"
            />
        </div>
        <div
            class="tabs"
            :style="{
                top: AppNavShow ? '6.25rem' : '3.5rem',
            }"
        >
            <van-tabs
                v-model="tabsIndex"
                title-active-color="#ffffff"
                background="#ffffff"
                color="#4291FF"
                line-width="1.25rem"
                type="card"
            >
                <van-tab
                    v-for="(item, index) in tabsList"
                    :title="item.name"
                    :key="index"
                    :to="index == 0 ? '/ssfgk/yhzz/0/1' : '/ssfgk/zfbz/0/1'"
                >
                </van-tab>
            </van-tabs>
        </div>
        <div class="shaixuan">
            <div class="shaixuan-item" @click="showRegion = true">
                <img src="~/assets/images/mini/weizhi.png" alt="地区" />
                <span>{{ city_code_name }}</span>
                <van-icon name="arrow-down" size="14" color="#BDC5D1" />
            </div>
            <!-- <div class="shaixuan-item" @click="showCate = true">
                <img src="~/assets/images/mini/shuizhong.png" alt="税种" />
                <span>{{ policyCateName }}</span>
                <van-icon name="arrow-down" size="14" color="#BDC5D1" />
            </div> -->
            <div class="shaixuan-item" @click="show_xiaoli_id_show = true">
                <img
                    src="~/assets/images/mini/xiaolizhushi.png"
                    alt="效力注释"
                />
                <span>{{ show_xiaoli_id_name }}</span>
                <van-icon name="arrow-down" size="14" color="#BDC5D1" />
            </div>
        </div>
        <div
            class="data-list"
            :style="{
                height: `calc(100vh - 4.64rem - 2.75rem - 30px - 2.625rem - ${
                    AppNavShow ? '3.5rem' : '0rem'
                })`,
            }"
        >
            <nuxt-link
                v-for="(item, index) in dataList"
                :key="index"
                class="data-item"
                :to="`/ssfgk/${item.id}.html`"
            >
                <div class="title">{{ item.title }}</div>
                <div class="tags">
                    <div class="tag">效力注释：{{ item.active_info }}</div>
                    <div class="tag">发文日期：{{ item.push_date }}</div>
                </div>
            </nuxt-link>
            <div class="page">
                <van-pagination
                    v-model="page"
                    :total-items="total"
                    :show-page-size="3"
                    :items-per-page="pageSize"
                    force-ellipses
                    @change="changePage"
                />
            </div>
        </div>

        <van-popup v-model="showPicker" round position="bottom">
            <van-picker
                show-toolbar
                title="选择查询条件"
                :columns="columns"
                @cancel="showPicker = false"
                @confirm="onConfirm"
            />
        </van-popup>
        <van-popup v-model="showDate" round position="bottom">
            <van-datetime-picker
                v-model="currentDate"
                type="date"
                title="选择年月日"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="dateConfirm"
            />
        </van-popup>
        <van-popup v-model="showRegion" round position="bottom">
            <van-picker
                show-toolbar
                value-key="name"
                title="选择地区"
                :columns="region"
                @confirm="confirmRegion"
                @cancel="showRegion = false"
            />
        </van-popup>
        <van-popup v-model="showCate" round position="bottom">
            <van-picker
                show-toolbar
                value-key="name"
                title="选择税种"
                :columns="policyCate"
                @confirm="confirmCate"
                @cancel="showRegion = false"
            />
        </van-popup>
        <van-popup v-model="show_xiaoli_id_show" round position="bottom">
            <van-picker
                show-toolbar
                value-key="name"
                title="选择税种"
                :columns="xiaoliList"
                @confirm="confirmXiaoLi"
                @cancel="show_xiaoli_id_show = false"
            />
        </van-popup>
    </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import { customs } from "@/assets/utils/regulation.js";
import {
    faguislideshow,
    getPolicyGetList,
    getPolicyCate,
    getPolicyPcCate,
} from "@/assets/api/regulationsApi.js";
import {
    newXungetSearch,
    checkview,
    getanalysedata,
} from "@/assets/api/indexApi.js";
import { recommend_policy } from "@/assets/api/quizData";

import {
    goTopSmooth,
    hightLightText,
    getArr_objKey,
    getText,
    downLoadAPP,
} from "@/assets/utils/utils.js";

import moment from "moment";

import region from "@/assets/json/region.json";

export default {
    async asyncData({ params, query, store }) {
        let data = {
            tabsList: [
                {
                    name: "税收优惠政策",
                    fieldName: "type",
                    pathName: "yhzz",
                    value: 1,
                    noShow: true,
                    class: [],
                    searchFilter: {
                        type: "1",
                    },
                    code: "PD4",
                },
                {
                    name: "政府补助",
                    fieldName: "policy_cate_id",
                    pathName: "zfbz",
                    value: 30,
                    class: [
                        {
                            name: "政府补助",
                        },
                    ],
                    searchFilter: {
                        policy_cate_id: "30",
                    },
                    code: "PD10",
                },
            ],
            isSearch: false,
            total: 0,
            pageSize: 10,
            page: 1,
            tabsIndex: 0,
            tabsTwoIndex: 0,
            dataList: [],
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/ssfgk/",
                images: [""],
                title: "",
                description: "",
                pubDate: "",
                upDate: "",
            },
            value: "",
        };

        if (params.page) data.page = parseInt(params.page.replace(".html", ""));

        data.tabsIndex = 1;

        data.jsonld["@id"] += `yhzz/${params.indexTwo}/${params.page}`;

        let parems = {
            page: data.page,
            limit: data.pageSize,
            // type: 1,
        };

        parems.policy_cate_id = "30";

        const res2 = await getPolicyGetList(parems);

        if (res2.code == 1) {
            data.dataList = res2.data;
            if (res2.data.length > 0) {
                data.total = res2.data[0].all_count;
                data.jsonld.pubDate = data.jsonld.upDate = moment(
                    res2.data[0].createtime * 1000
                ).format("YYYY-MM-DD");
            } else this.total = 0;
        }

        return data;
    },

    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld), // <- set jsonld object in data or wherever you want
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: this.metaTitle + "-【小竹财税平台】",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.metaDescription,
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content: this.metaKeywords,
                },
            ],
        };
    },
    layout: "home",
    components: {},
    data() {
        return {
            metaTitle: "小竹税收法规库",
            metaKeywords: "小竹税收法规库,财税法规库,税收法规库",
            metaDescription:
                "小竹税收法规库汇集了各种税收政策和地方税收法规，包括但不限于增值税、企业所得税、个人所得税、印花税、土地增值及相关的税收解读说明和操作指南。",

            getText: getText,

            // tabsIndex: 0,
            // tabsTwoIndex: 0,

            linkList: [
                {
                    name: "税局",
                },
                {
                    name: "海关",
                },
            ],
            linkIndex: 0,

            // 税种
            policyCate: [],
            policyCateName: "税种",
            showCate: false,

            show_xiaoli_id_show: false,
            show_xiaoli_id_name: "效力注释",
            // 效力注释
            xiaoliList: [
                {
                    id: "现行有效",
                    name: "现行有效",
                },
                {
                    id: "部分失效/废止",
                    name: "部分失效/废止",
                },
                {
                    id: "全文失效/废止",
                    name: "全文失效/废止",
                },
                {
                    id: "已修订",
                    name: "已修订",
                },
            ],

            swiper: [],

            // 法规数据列表
            // dataList: [],
            // total: 0,
            // pageSize: 30,
            // page: 1,

            // 高级搜索显示
            highSearchShow: false,
            // 搜索2
            searchInput: "",
            number2: "",
            number3: "",
            date: "",

            retrieveFields: "title",

            // 搜索
            isSenior: true, // 高级搜索  4.27 默认高级搜索
            title_keyword: "", // 标题关键字
            cons_keyword: "", // 内容关键字
            zh_keyword1: "", // 文号
            zh_keyword2: "", // 文号
            zh_keyword3: "", // 文号
            city_code: "", // 地区
            city_code_name: "全国", // 地区
            policy_cate_id: "", //  企业所得税
            xiaoli_id: "", // 效力注释
            date_: "",

            pickerOptions: {
                shortcuts: [
                    {
                        text: "一个月内",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "三个月内",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "一年内",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 365
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },

            region: [],
            showRegion: false,

            loading: false,
            isSearch: false,

            downLoadAPP: downLoadAPP,

            showPicker: false,
            columns: [
                { text: "查标题", name: "title" },
                { text: "查文章", name: "info_content_text" },
                { text: "查文号", name: "push_number" },
                { text: "查时间", name: "push_date" },
            ],
            retrieveFields: "title",
            date1: "",
            date2: "",
            dateIndex: 1,
            showDate: false,
            minDate: new Date(1970, 0, 1),
            maxDate: new Date(),
            currentDate: new Date(),
            inputText: "",
        };
    },
    computed: {
        ...mapState("regulations", {}),
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
            AppNavShow: (state) => state.AppNavShow,
        }),
    },
    created() {
        this.getMetaInfo();

        this.jsonld.title = this.metaTitle + "-【小竹财税平台】";
        this.jsonld.description = this.metaDescription;
    },
    mounted() {
        console.log(this.dataList);
        getanalysedata({
            m_id: 2,
            type: 1,
            code: "PD4",
            describe: "优惠政策",
        });

        this.$nextTick(() => {
            goTopSmooth();
        });
        this.getRegion();
        this.getPolicyCate();
    },
    watch: {},
    methods: {
        getMetaInfo() {
            this.metaTitle = "税收优惠政策-税收法规库";
            this.metaKeywords = "税收优惠政策";
            this.metaDescription =
                "小竹财税税收优惠政策版块，汇集众多税收优惠政策。实时更新税收优惠政策条例及税收相关优惠规定出台，并积极响应税收优惠政策的发布与实施。";
        },

        // 切换分页
        changePage(page) {
            this.page = page;
            this.$router.push({
                name: "ssfgk-yhzz-indexTwo-page",
                query: {},
                params: {
                    page: page + "",
                    indexTwo: 0,
                },
            });
        },

        // 获取税种
        async getPolicyCate() {
            const res = await getPolicyCate({});
            if (res.code == 1) {
                this.policyCate = res.data;
            }
        },

        // 处理省市区数据
        getRegion() {
            // console.log(region);
            let region_n = region;
            for (let items of region_n) {
                for (let item of items.children) {
                    delete item.children;
                }
            }
            this.region = region_n;
            console.log(this.region);
        },
        confirmRegion(item, index) {
            this.city_code = this.region[index[0]].children[index[1]].id;
            this.city_code_name = this.region[index[0]].children[index[1]].name;
            this.showRegion = false;
            this.getData();
        },
        confirmCate(item, index) {
            this.policy_cate_id = item.id;
            this.policyCateName = item.name;
            this.showCate = false;
            this.getData();
        },
        confirmXiaoLi(item) {
            this.show_xiaoli_id_name = item.name;
            this.show_xiaoli_id_id = item.id;
            this.show_xiaoli_id_show = false;
            this.getData();
        },
        async getData() {
            let parems = {
                page: this.page,
                limit: this.pageSize,
                // type: 1,
            };

            parems.policy_cate_id = "30";
            if (this.city_code) {
                parems.city_code = this.city_code;
            }
            // if (this.policy_cate_id) {
            //     parems.policy_cate_id += "," + this.policy_cate_id;
            // }
            if (this.show_xiaoli_id_id) {
                parems.xiaoli_id = this.show_xiaoli_id_id;
            }

            const res2 = await getPolicyGetList(parems);

            if (res2.code == 1) {
                this.dataList = res2.data;
                if (res2.data.length > 0) {
                    this.total = res2.data[0].all_count;
                } else this.total = 0;
            }
        },

        onConfirm(item, index) {
            this.retrieveFields = item.name;
            this.showPicker = false;
        },
        showDatePopup(index) {
            this.dateIndex = index;
            this.showDate = true;
        },
        dateConfirm(date) {
            let year = date.getFullYear(); // 获取年份（四位数）
            let month = ("0" + (date.getMonth() + 1)).slice(-2); // 获取月份（注意月份是从0开始的，所以需要+1），并确保是两位数
            let day = ("0" + date.getDate()).slice(-2);
            let formattedDate = year + "-" + month + "-" + day;
            this["date" + this.dateIndex] = formattedDate;
            this.showDate = false;
        },

        onSearch() {
            let url = "/ssfgksearch?filter=yhzz&";
            if (
                this.retrieveFields == "title" ||
                this.retrieveFields == "info_content_text" ||
                this.retrieveFields == "push_number"
            ) {
                if (!this.inputText) {
                    Toast("请输入搜索内容");
                    return;
                }
                url += `k=${this.inputText}&date=&t=${this.retrieveFields}`;
            }
            if (this.retrieveFields == "push_date") {
                if (!this.date1 || !this.date2) {
                    Toast("请选择时间范围");
                    return;
                }
                url += `k=&date=${this.date1},${this.date2}&t=${this.retrieveFields}`;
            }
            this.$router.push({
                path: url,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.accounting {
    position: relative;
    background-color: #ffffff;
}
.ssfgk-bj {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
}
.nav-bar {
    width: 100%;
    position: sticky;

    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 2.75rem;
    .left,
    .right {
        width: 15%;
    }

    .centent {
        font-weight: 600;
        font-size: 1.31rem;
        color: #333333;
    }
}

.search {
    position: relative;
    z-index: 100;
    width: 91%;
    height: 2.5rem;
    margin: 0.7rem auto;
    background-color: #ffffff;
    border-radius: 2.5rem;
    display: flex;
    align-items: center;
    padding: 0 1rem 0 1.2rem;
    .select {
        font-size: 0.75rem;
        color: #333333;
        .select-icon {
            transform: rotate(90deg);
            position: relative;
            top: -0.07rem;
        }
    }
    .line {
        width: 1px;
        height: 1.125rem;
        background-color: #bbbbbb;
        margin: 0 0.68rem;
    }
    .input {
        width: 63%;
    }
    .search-icon {
        position: absolute;
        right: 1rem;
    }

    .input-date {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        font-size: 0.75rem;
        div {
            width: 100%;
            text-align: center;
            height: 1.2rem;
            line-height: 1.2rem;
        }
        span {
            color: #999999;
        }
    }

    ::v-deep .van-cell {
        padding: 0;
    }
    ::v-deep .van-search {
        padding: 0;
    }
    ::v-deep .van-search__content {
        background: transparent;
    }
    ::v-deep .van-field__left-icon {
        display: none;
    }
}

.tabs {
    position: sticky;
    z-index: 110;
}

.data-list {
    position: relative;
    z-index: 100;
    width: 92%;
    background: #ffffff;
    border-radius: 10px;
    padding: 0 0.93rem;
    margin: 00.5rem auto 0;
    overflow: auto;
}

.data-item {
    border-bottom: 1px solid #e5e5e5;
    padding: 1rem 0;
    display: block;
    .title {
        font-weight: 500;
        font-size: 0.93rem;
        line-height: 1.5;
        color: #3d3d3d;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
    }
    .tags {
        margin-top: 0.63rem;
        display: flex;
        align-items: center;

        .tag {
            margin-right: 0.6rem;
            color: #999999;
            font-size: 0.75rem;
        }
    }
}

.page {
    width: 92%;
    margin: 0 auto;
    padding: 1rem 0;
}

.shaixuan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 92vw;
    margin: 0 auto;
    position: relative;
    z-index: 100;
    padding-top: 0.625rem;
}

.shaixuan-item {
    width: 10.93rem;
    height: 2rem;
    line-height: 2rem;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 0.3rem;
    padding: 0 0.6rem;
    span {
        width: 100%;
        display: block;
        font-size: 0.8rem;
        color: #95a3b8;
        white-space: nowrap;
        /* 隐藏超出容器的内容 */
        overflow: hidden;
        /* 用省略号显示被隐藏的内容 */
        text-overflow: ellipsis;
    }
    img {
        width: 0.93rem;
        height: 0.93rem;
        display: block;
        margin-right: 0.3rem;
    }
}
</style>